<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/reset.css">
    <style>
        .title {
            line-height: 40px;
        }

        .list {
            margin-top: 20px;
        }

        .list li {
            height: 32px;
            line-height: 32px;
            border: 1px dashed #333;
        }
    </style>
</head>

<body>
    <div id="wrap">
        <button class="add">新增</button>
        <ul class="list one">
            <li class="first">01</li>
            <li>02</li>
            <li class="mid">03</li>
            <li>04</li>
            <li>05</li>
            <li class="last">06</li>
        </ul>
    </div>
</body>
<script>

    var list = document.querySelector(".list");

    var add = document.querySelector(".add");

    // 点击新增按钮 创建一个元素(li)放到.list中 
    // 1. 创建一个元素(li)   => 随机背景色
    // 2. 放到.list中 
    add.onclick = function () {
        // 创建元素节点
        var li = document.createElement("li");
        console.log(li);

        li.innerText = "我是新增的li";
        li.setAttribute("class", "newLi");

        li.style.backgroundColor = randColor();

        li.onclick = function () {
            console.log(this.innerText);// this -> 绑定事件的元素 -> 新增的li
        }


        list.append(li);
    }



    // 随机颜色
    // 常见 颜色用法:
    // 单词  red green blue pink yellow
    // rgba  rgba(255,255,255,1)
    // 16进制:  #ffffff     0123456789abcdef


    // function randColor() {
    //     function randNum() {
    //         return Math.round(Math.random() * 255);
    //     }
    //     return `rgba(${randNum()},${randNum()},${randNum()},1)`;
    // }

    function randColor() {
        var str = "0123456789abcdef";
        var colorStr = "#";
        for (var i = 0; i < 6; i++) {
            var index = Math.floor(Math.random() * str.length);
            var char = str.charAt(index);
            colorStr += char;
        }
        return colorStr;
    }






</script>

</html>